<template>
  <div>
    <el-button type="primary" class="btn2" @click="tianjia">添加分类</el-button>

    <tree-table
      :data="goodsTypeList"
      :columns="columns"
      :expand-type="false"
      :selection-type="false"
      show-index
      border
    >
      <template slot="isOk" slot-scope="scope">
        <i
          style="color: lightgreen"
          v-show="scope.row.cat_deleted == false"
          class="el-icon-success"
        ></i>
        <i
          style="color: red"
          v-show="scope.row.cat_deleted != false"
          class="el-icon-error"
        ></i>
      </template>

      <template slot="isSort" slot-scope="scope">
        <el-tag v-show="scope.row.cat_level == 0" type="">一级</el-tag>
        <el-tag v-show="scope.row.cat_level == 1" type="success">二级</el-tag>
        <el-tag v-show="scope.row.cat_level == 2" type="warning">三级</el-tag>
      </template>

      <template slot="cz" slot-scope="scope">
        <el-button class="btn3" type="primary" icon="el-icon-edit"
        @click="bianji(scope.row)"
        >编辑</el-button
        >

        <el-button
          class="btn3"
          type="danger"
          icon="el-icon-delete"
          @click="shanchu(scope.row)"
          >删除</el-button
        >
      </template>
    </tree-table>
    <el-pagination
      class="fenye"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="info.pagenum"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="info.pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>

    <!-- 添加用户弹出层 -->
    <el-dialog
      title="添加分类"
      :visible.sync="dakai"
      width="50%"
      class="logtitle"
      @close="guanbi"
    >
      <el-form
        :model="typesForm"
        status-icon
        :rules="rules"
        ref="typesForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item prop="cat_name" label="分类名称">
          <el-input
            type="text"
            class="ipt"
            v-model="typesForm.cat_name"
            autocomplete="off"
          ></el-input>
        </el-form-item>

        <el-form-item label="父级分类">
          <el-cascader
            v-model="selectKey"
            :options="parentList"
            expand-Trigger="hover"
            :props="listProps"
            @change="handleChange"
            clearable
            change-on-select
          ></el-cascader>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dakai = false">取 消</el-button>
        <el-button type="primary" @click="tianjiafenlei">确 定</el-button>
      </span>
    </el-dialog>


    <!-- 编辑用户弹出层 -->
    <el-dialog
      title="修改分类"
      :visible.sync="dk"
      width="50%"
      class="logtitle"
      @close="gb"
    >
      <el-form
        :model="bjlist"
        status-icon
        :rules="rules"
        ref="bjlist"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item prop="cat_name" label="分类名称">
          <el-input
            type="text"
            class="ipt"
            v-model="bjlist.cat_name"
            autocomplete="off"
          ></el-input>
        </el-form-item>

      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dk = false">取 消</el-button>
        <el-button type="primary" @click="xiugai">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { gettypeList, deletype, addType ,revisType} from "../../api";
export default {
  name: "GoodsCategories",
  data() {
    return {
      parentList: [],
      selectKey: [],
      listProps: {
        value: "cat_id",
        label: "cat_name",
        children: "children",
      },
      dakai: false,
      dk:false,
      goodsTypeList: [],
      total: 0,
      columns: [
        { label: "分类名称", prop: "cat_name" },
        {
          prop: "cat_deleted",
          label: "是否有效",
          type: "template",
          template: "isOk",
        },
        {
          prop: "cat_level",
          label: "排序",
          type: "template",
          template: "isSort",
        },
        {
          prop: "caozuo",
          label: "操作",
          type: "template",
          template: "cz",
        },
      ],
      info: {
        type: 3,
        pagenum: 1,
        pagesize: 5,
      },
      typesForm: {
        cat_name: "",
        cat_pid: 0,
        cat_level: 0,
      },
      bjlist:{},
      rules: {
        cat_name: [
          { required: true, message: "请输入分类名称", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    //获得列表
    getList() {
      gettypeList(this.info).then((res) => {
        this.goodsTypeList = res.data.data.result;
        this.total = res.data.data.total;
      });
    },
    //分页
    handleSizeChange(val) {
      this.info.pagesize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.info.pagenum = val;
      this.getList();
    },

    //删除
    shanchu(row) {
      deletype(row.cat_id).then((res) => {
        if (res.data.meta.status == 200) {
          this.$message({
            message: res.data.meta.msg,
            type: "success",
          });
          this.getList();
        }
      });
    },

    //获取父级分类
    getFatherList() {
      gettypeList({
        type: 2,
      }).then((res) => {
        this.parentList = res.data.data;
      });
    },
    //添加分类
    tianjia() {
      this.getFatherList();
      this.dakai = true;
    },
    handleChange() {
      if (this.selectKey.length > 0) {
        this.typesForm.cat_pid = this.selectKey[this.selectKey.length - 1];
        this.typesForm.cat_level = this.selectKey.length;
        return;
      } else {
        this.typesForm.cat_pid = 0;
        this.typesForm.cat_level = 0;
      }
    },
    tianjiafenlei() {
      console.log(this.typesForm);
      this.$refs.typesForm.validate((valid) => {
        if (!valid) return;
        addType(this.typesForm).then((res) => {
            this.getList();
          if (res.data.meta.status == 201) {
            this.$message({
              message: res.data.meta.msg,
              type: "success",
            });

          }else{
            this.$message({
              message: res.data.meta.msg,
              type: "error",
            });
          }
        });
      });
      this.dakai = false;
    },
    //监听关闭
    guanbi() {
      this.$refs.typesForm.resetFields();
      this.selectKey = [];
      this.typesForm.cat_pid = 0;
      this.typesForm.cat_level = 0;
    },

    //编辑
    bianji(row){
        this.dk = true
        this. bjlist = row
       
    },
    xiugai(){
        revisType(this.bjlist.cat_id,this.bjlist.cat_name).then(res=>{
            if (res.data.meta.status == 200) {
          this.$message({
            message: res.data.meta.msg,
            type: "success",
          });
          this.getList()
        }
        })
        this.dk = false
    },
    //监听编辑关闭
    gb(){
        this.$refs.bjlist.resetFields();
    }
  },
  created() {
    this.getList();
  },
};
</script>

<style scoped lang="less">
.btn2 {
  width: 88px;
  margin-left: 20px;
  margin: 5px 0 15px;
}
.btn3 {
  width: 64px;
  height: 24px;
  font-size: 12px;
  padding: 0;
}
.el-cascader {
  width: 100%;
}
</style>